<template>
  <van-row>
    <van-nav-bar
      title="修改产量登记"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-form ref="submitForm" @submit="doSubmit">
      <van-field
        readonly
        clickable
        name="produceNo"
        :value="submitForm.produceNo"
        label="排产编号"
        placeholder="点击选择排产"
        input-align="left"
        :rules="[{ required: true, message: '请选择排产' }]"
        @click="submitForm.id === ''?showProduce = true : false"
      />
      <van-row v-if="submitForm.produceId">
        <van-cell-group>
          <van-col :span="12">
            <van-cell title="客户" :value="submitForm.customerName" />
          </van-col>
          <van-col :span="12">
            <van-cell title="品名" :value="productInfo.moldName" />
          </van-col>
          <van-col :span="12">
            <van-cell title="颜色" :value="productInfo.color" />
          </van-col>
          <van-col :span="12">
            <van-cell title="材质" :value="productInfo.material" />
          </van-col>
          <van-col :span="12">
            <van-cell title="尺码" :value="productInfo.size" />
          </van-col>
          <van-col :span="12">
            <van-cell title="长度" :value="productInfo.length" />
          </van-col>
          <van-col :span="12">
            <van-cell
              title="余数"
              :value="submitForm.remainingQuantity"
            >
              <template #default>
                <span style="color: #ee0a24">{{ submitForm.remainingQuantity }}{{ productInfo.unit }}</span>
              </template>
            </van-cell>
          </van-col>
        </van-cell-group>
      </van-row>
      <van-field
        readonly
        clickable
        name="outputDate"
        :value="submitForm.outputDate"
        label="日期选择"
        placeholder="点击选择日期"
        input-align="left"
        :rules="[{ required: true, message: '请选择日期' }]"
        @click="showOutputDatePicker = true"
      />
      <van-field
        name="shiftId"
        label="班次"
        input-align="left"
        :rules="[{ required: true, message: '请选择班次' }]"
      >
        <template #input>
          <van-radio-group v-model="submitForm.shiftId" direction="horizontal">
            <div v-for="(i,idx) in shiftList" :key="idx">
              <van-radio :name="i.id">{{ i.name }}</van-radio>
            </div>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="submitForm.quantity"
        name="产量"
        label="产量"
        placeholder="(必填)产量"
        type="digit"
        :rules="[{ required: true, message: '请填写产量' }]"
        input-align="left"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-calendar v-model="showOutputDatePicker" :min-date="minDate" :show-confirm="false" @confirm="onConfirmOutputDate" />
    <div v-if="showProduce">
      <select-produce ref="selectProduce" :visible="showProduce" @close="handleCloseProduce" />
    </div>
  </van-row>
</template>

<script>
import { updateOutputById, selectOutputById, saveOutput } from '@/api/output'
import { selectAllShift } from '@/api/shift'
import moment from 'moment/moment'
import Moment from 'moment'
import SelectProduce from '@/components/modules/selectProduce.vue'

export default {
  name: 'OutputUpdateModule',
  components: { SelectProduce },
  data() {
    return {
      showOutputDatePicker: false,
      showProduce: false,
      shiftList: [],
      productInfo: {},
      submitForm: {},
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  methods: {
    init(id) {
      this.resetForm()
      this.selectAllShift()
      selectOutputById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
          this.productInfo = resp.data.productInfo
        }
      })
    },
    initProduce(row) {
      this.resetForm()
      this.selectAllShift()
      this.title = '新增产量登记'
      this.submitForm.produceId = row.id
      this.submitForm.produceNo = row.produceNo
      this.submitForm.customerName = row.customerName
      this.submitForm.remainingQuantity = row.remainingQuantity
      this.productInfo = row.productInfo
      /* selectProduceById(produceId).then(resp => {
        if (resp.success) {
          this.submitForm.produceId = resp.data.id
          this.submitForm.produceNo = resp.data.produceNo
          this.submitForm.customerName = resp.data.customerName
          this.submitForm.remainingQuantity = resp.data.remainingQuantity
          this.productInfo = resp.data.productInfo
        }
      }) */
    },
    resetForm() {
      this.productInfo = {}
      this.submitForm = {
        id: '',
        outputDate: '',
        shiftId: '',
        quantity: ''
      }
    },
    doSubmit() {
      let request = saveOutput
      if (this.submitForm.id) {
        request = updateOutputById
      }
      request(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.submitForm = {}
          this.$emit('close')
        }
      })
    },
    onConfirmOutputDate(row) {
      this.submitForm.outputDate = Moment(row).format('YYYY-MM-DD')
      this.showOutputDatePicker = false
    },
    selectAllShift() {
      selectAllShift().then(resp => {
        if (resp.success) {
          this.shiftList = resp.data
        }
      })
    },
    handleCloseProduce(row) {
      this.showProduce = false
      if (row) {
        this.submitForm.produceId = row.id
        this.submitForm.produceNo = row.produceNo
        this.submitForm.productName = row.productName
        this.submitForm.remainingQuantity = row.remainingQuantity
        this.productInfo = row.productInfo
      }
    }
  }
}
</script>

<style scoped>

</style>
